<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <!--标题部分-->
    <div>
       <h2>系统公告客户端设计及实现(Bootstrap+jquery)</h2>
    </div>
    <!--内容部分-->
    <div>
       <div id="noticeListContainer"><!--内容列表区-->
           <form id="queryForm" style="display: inline">
               <input type="text" name="title" placeholder="请输入标题">
               <input type="button" class="btn btn-primary btn-sm" value="查询" onclick="doQueryNotices()">
           </form>
           <button onclick="doDisplay()" class="btn btn-primary btn-sm">添加</button>
           <table class="table">
                <thead>
                   <tr>
                       <th>序号</th>
                       <th>标题</th>
                       <th>类型</th>
                       <th>状态</th>
                       <th>创建时间</th>
                       <th>操作</th>
                   </tr>
                </thead>
               <tbody>
                  <tr><td colspan="6">数据正在加载中.....</td></tr>
               </tbody>
           </table>
           <!--分页DIV-->
           <div class="pagination">
               <button class="pre">上一页</button>
               <button class="percent">1/1</button>
               <button class="next">下一页</button>
               <form id="pageForm" style="display: inline">
                   <input type="text" name="pageCurrent">
                   <input type="button" value="跳转" class="jump">
               </form>
           </div>
       </div>
       <div id="noticeEditContainer" style="display: block">
           <form id="noticeEditForm">
               <input type="hidden" id="id">
               <div class="form-group">
                   <label for="typeId" >类型:</label>
                   <select class="form-control" id="typeId">
                       <option value="1">通知</option>
                       <option value="2">公告</option>
                   </select>
               </div>
               <div class="form-group">
                   <label for="titleId">标题:</label>
                   <input type="text" class="form-control" id="titleId" placeholder="title">
               </div>
               <div class="form-group">
                   <label for="contentId">内容:</label>
                   <textarea class="form-control" rows="3" id="contentId">
                   </textarea>
               </div>
               <div class="form-group">
                   <label>状态:</label>
                   <label class="radio-inline">
                       <input type="radio" name="status" value="0" checked> 正常
                   </label>
                   <label class="radio-inline">
                       <input type="radio" name="status" value="1"> 关闭
                   </label>
               </div>
               <button type="button" class="btn btn-primary submit" onclick="doSaveOrUpdate()">Submit</button>
               <button type="button" class="btn btn-primary cancel">Cancel</button>
           </form>
       </div>
    </div>
    <br/>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
    //jquery中定义的页面加载函数(页面加载完成执行)
    $(function(){
        //debugger
        doGetNotices();
        //分页事件注册及处理
        //在类选择器为pagination的容器对象注册click事件，
        // 当点击容器内部的pre,next,jump类选择器对应的元素时执行doJumpToPage函数
        $(".pagination").on("click",".pre,.next,.jump",doJumpToPage);
    });
    function doFindById(id){
        //1.基于id查找通告信息
        let url=`http://localhost/notice/${id}`;
        $.ajax({url:url,success(result){
                if(result.state==1){
                    //2.初始化表单数据
                    doInitEditForm(result);
                }else{
                    alert("可能记录已经被删除");
                }
            }
        })
    }
    //初始化表单数据
    function doInitEditForm(result){//result.data->Notice
        $("#id").val(result.data.id);
        $(`#noticeEditForm select>option[value=${result.data.type}]`).prop("selected",true)
        $("#titleId").val(result.data.title);
        $("#contentId").val(result.data.content);
        $(`#noticeEditForm input[value=${result.data.status}]:radio`).prop("checked",true)
    }
    //添加或更新通告信息
    function doSaveOrUpdate(){
       //1.获取请求参数
        let params={
            id:$("#id").val(),
            type:$("#typeId").val(),
            title:$("#titleId").val(),
            content:$("#contentId").val(),
            status:$("#noticeEditForm input:radio:checked").val()
        }
       //2.定义请求url
        let url="http://localhost/notice/";
       //3.发送异步请求
        $.ajax({
            method:params.id?"put":"post",
            url:url,
            data:JSON.stringify(params),//将js对象转换为json字符串
            contentType:"application/json",//向服务端传递的数据类型
            success(result){
                if(result.state==1){
                    alert(result.message);
                    doGetNotices();
                    doRestForm();//重置表单数据
                }else{
                    alert(result.message);
                }
            }
        });
    }
    function doRestForm(){//重置表单数据
        $("#id").val("");
        $(`#noticeEditForm select>option[value=1]`).prop("selected",true)
        $("#titleId").val("");
        $("#contentId").val("");
        $(`#noticeEditForm input[value=0]:radio`).prop("checked",true)
    }

    //设置div容器的隐藏或显示
    function doDisplay(){
        //让编辑区显示
       //$("#noticeEditContainer").css("display","block");
       // 让列表区隐藏
       //$("#noticeListContainer").css("display","none");
    }

    //点击查询按钮时基于条件查询通告信息
    function doQueryNotices(){
        //1.初始化当前页页码
        localStorage.setItem("pageCurrent",1);
        //2.基于条件进行查询
        doGetNotices();
    }
    //基于分页按钮点击事件，进行分页查询
    function doJumpToPage(){
        //1.获取被点击对象的class属性值.
        //$(this)表示被点击的对象
        //prop(属性名[,属性值])为jquery中用于操作属性值的一函数
        let cls=$(this).prop("class");
        //2.基于被点击对象的class属性值修改当前页码值
        //2.1获取当前页码值，总页数
        let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));//当前页码值
        let pageCount=parseInt(localStorage.getItem("pageCount"));//总页数
        //2.2修改当前页码值
        if(cls=="pre"&&pageCurrent>1){
            pageCurrent--;
        }else if(cls=="next"&&pageCurrent<pageCount){
            pageCurrent++;
        }else if(cls=="jump"){
            //获取form表单中元素为input，名字为pageCurrent的值
            let pageStr=$("#pageForm input[name=pageCurrent]").val();
            let pageC=parseInt(pageStr);
            if(pageC<1 || pageC>pageCount){
                alert("页码值不合法");
                $("pageForm input[name=pageCurrent]").val("");//回到初始状态
                return;
            }
            pageCurrent=pageC;
            $("pageForm input[name=pageCurrent]").val("");//回到初始状态
        }else{
            //假如已经是第一页了，你还点上一页，则什么也不做
            //假如已经是最后一页了，你还点下一页，则什么不做
            return;
        }
        console.log("pageCurrent",pageCurrent)
        //将修改了以后的当前页码值，存储起来
        localStorage.setItem("pageCurrent",pageCurrent);
        //3.基于新的页码值重新执行查询
        doGetNotices();
    }
    //条件查询公告通告信息
    function doGetNotices(){
        //1.定义请求参数
         let pageCurrent=localStorage.getItem("pageCurrent");
         if(pageCurrent==''||pageCurrent=="NaN")pageCurrent=1;
        // let params="pageCurrent="+pageCurrent;
         //let params=`pageCurrent=${pageCurrent}`;
         let params={pageCurrent:pageCurrent};
         //let params={pageCurrent}
         let title=$("#queryForm input[name=title]").val();
         params.title=title;
        //定义请求url
         let url="http://localhost/notice/";
        //基于jquery中的ajax函数向服务端发起异步请求
        //$代表jquery对象
        $.ajax({
            url: url,
            data: params,
            success(result) {//服务端没有抛出异常到客户端时执行此函数，result为服务端响应的结果
               // console.log(result);//JsonResult
               doHandleQueryResponseResult(result);
            }
        })
    }
    //处理查询响应结果
    function doHandleQueryResponseResult(result){
        if(result.state==1){
          doHandleQueryOk(result);
        }else{
          doHandleQueryError();
        }
    }
    function doHandleQueryError(){
        debugger
        //1.更新tbody内容
        let tBody=$("table>tbody");
        let len=$("table>thead>tr>th").length;
        let tr=`<tr><td colspan="${len}">没有找到对应记录</td></tr>`
        tBody.html(tr);
        //================
        //2.刷新页码值
        $(".percent").html("0/0");
    }
    //处理正确的条件查询结果
    function doHandleQueryOk(result){
        //设置tbody中的内容
       let records=result.data.list;
       doSetTableBodyRows(records);
       //设置分页信息(初始化分页数据)
       if(records.length>0)
       doSetPagination(result);
    }
    //初始化分页信息
    function doSetPagination(result){
        //初始化页面上的分页数据
        let pageCurrent=result.data.pageNum;//当前页码值
        let pageCount=result.data.pages;//总页数
        $(".percent").html(pageCurrent+"/"+pageCount);
        //将当前页码值存储到浏览器的localStorage对象中，便于其它方法后续应用
        localStorage.setItem("pageCurrent",pageCurrent);
        localStorage.setItem("pageCount",pageCount);
    }
    //设置tbody中的公告或通知信息
    function doSetTableBodyRows(records){//通告信息
        //1.获取tbody对象，并清空原有内容
        let tBody=$("tbody");//获取tbody对象
        tBody.empty();//清空tbody内容
        //2.迭代records中的内容，并追加到tbody中
        if(records.length==0){
            doHandleQueryError();
            return;
        }
        //forEach为js中的原生数组函数，item为数组中的一个元素，i为元素下表
        records.forEach((item,i)=>tBody.append(doCreateRow(item,i)));

    }
    //创建tr对象并填写每一列的内容
    function doCreateRow(item,i){
        return `<tr><td>${i+1}</td>
                    <td>${item.title}</td>
                    <td>${item.type=='1'?"通知":"公告"}</td>
                    <td>${item.status=='0'?"正常":"关闭"}</td>
                    <td>${item.createdTime}</td>
                    <td>
                    <button class="btn btn-danger btn-xs" onclick="doDeleteById(${item.id})">delete</button>
                    <button class="btn btn-warning btn-xs" onclick="doFindById(${item.id})">update</button>
                    </td>
                </tr>`;
    }
    function doDeleteById(id){//http://localhost/notice/id
        //1.定义请求参数
        //2.定义请求url
        let url=`http://localhost/notice/${id}`;
        //3.发送异步请求
        $.ajax({
            method:"delete",
            url:url,
            success(result) {
               doHandleDeleteResponseResult(result);
            }
        });
    }
    function doHandleDeleteResponseResult(result){
        if(result.state==1){//ok
            doHandleDeleteOk(result.message);
        }else{
            //doHandleDeleteError();
            alert(result.message);
        }
    }
    function doHandleDeleteOk(msg){
        //1.给出提示信息
        alert(msg);
        //2.设置当前页码值(假如是最后一页，没有数据了应该返回上一页)
        let rows=$("table>tbody>tr").length;
        let pageCurrent=parseInt(localStorage.getItem("pageCurrent"));
        let pageCount=parseInt(localStorage.getItem("pageCount"));
        if(pageCurrent>1&&pageCurrent==pageCount&&rows==1){
            pageCurrent--;
            localStorage.setItem("pageCurrent",pageCurrent);
        }
        //3.刷新
        doGetNotices();
    }

</script>
</body>
</html>